<!--分页组件-->
<template>
	<div class="pagination">
		<div class="page-wrapper">
			<div class="last-page" @click="toLast()">上一页</div>
			<div class="page-select-wrapper">
				<input type="text" class="page-text" v-model="pageNow">
				<div class="jumb" @click="pageJumb()">跳转</div>
			</div>
			<div class="next-page" @click="toNext()">下一页</div>
			<p>共{{totalNum}}页</p>
		</div>
	</div>
</template>

<script>
	export default {
		name:'pagination',
		props:['page','totalNum'],
		data() {
			return {
				pageNow:this.page	
			}
		},
		mounted() {
			this.pageNow = 1;
		},
		methods: {
			toLast() {
				if(this.pageNow >1) {
					this.pageNow--;
					this.$emit('last');
				}
			},

			toNext() {
				console.log(this.pageNow,this.totalNum);
				if(this.pageNow <this.totalNum) {
					this.pageNow++;
					this.$emit('next');
				}
			},

			pageJumb() {
				/*当跳转页数不在总页数范围内时，小于1则重置为1,大于总页数则重置为总页数*/
				if(this.pageNow < 1) {
					this.pageNow = 1;
				}else if(this.pageNow > this.totalNum) {
					this.pageNow = this.totalNum;
				}
				if(this.pageNow >=1 && this.pageNow <=this.totalNum) {
					this.$emit('jumb',this.pageNow);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagination {
		width: 100%;
		height: 24px;
		margin: 19% 0;
		font-size: 12px;
		text-align: center;
		.page-wrapper {
			float: right;
			width: 370px;
			height: 100%;
			.last-page,.next-page {
				float: left;
				height: 100%;
				width: 60px;
				background-color:#3476d6;
				line-height: 24px;
				color: #fff;
				border: 1px solid #ddd;
				cursor: pointer;
				&:hover {
					background-color:#5a83ef;
				};
			}
			.page-select-wrapper {
				float: left;
				margin:0 32px ;
				.page-text {
					float: left;
					height: 21px;
				    width: 36px;
				    text-align: center;
				    line-height: 24px;
				    font-size: 15px;
				}
				.jumb {
					float: left;
					height: 24px;
					width: 60px;
					margin-left: 20px;
					line-height: 24px;
					background-color: #3476d6;
					color: #fff;
					border: 1px solid #ddd;
					cursor: pointer;
					&:hover {
						background-color:#5a83ef;
					};
				}
			}
			p{
				display: block;
				float: left;
				height: 100%;
				line-height:26px;
				width: 56px; 
			}
		}
	}
</style>